<!-- eslint-disable vue/prop-name-casing -->
<!-- 每个子任务的前置和后置代码区域 -->

<script>
import Codemirror from '@/components/PythonCodemirror'
import { searchGlobalSettings } from '@/api/globalSetting'

export default {
  components: {
    Codemirror
  },
  model: {
    prop: 'code_from',
    event: 'codeChange'
  },
  props: {
    code_from: {
      type: String,
      required: true,
      default: 'def process_output(output):'
    },
    // 确定是前置还是后置
    is_front: {
      type: Boolean,
      required: true,
      default: true
    }
  },
  data() {
    return {
      code: this.code_from,
      showEdit: false
    }
  },
  computed: {
    posDescribe() {
      return (this.is_front ? 'frontCode' : 'endCode')
    }
  },
  watch: {
    code_from(newValue) {
      this.code = newValue
    },
    code(newVal) {
      this.$emit('codeChange', newVal)
    }
  },
  created() {
    // this.code = 'def process_output(output):'
  },
  methods: {
    changeShowCode() {
      this.showEdit = !this.showEdit
    },
    // 点击查看MemoryBus帮助弹出的浮层窗口
    async openMemoryBusHelp() {
      /* 获取输入参数的帮助内容 */
      let defaultContent = '获取MemoryBus的帮助时出错'
      await searchGlobalSettings({ 'searchVal': '', 'region': 'memorybus_help' })
        .then(res => {
          defaultContent = res[0]['value']
        })
        .catch(err => {
          console.log('获取MemoryBus的帮助时出错：', err)
        })

      /* 给消息框添加样式 */
      const style = document.createElement('style')
      style.textContent = `
        .custom-alert-width {
          width: 1000px !important;
        }`
      document.head.appendChild(style)

      /* 输入参数帮助弹出 */
      this.$alert(`<textarea readonly style="width: 100%; min-height: 280px; border: none; background-color: #f0f0f0; overflow-y: auto;">${defaultContent}</textarea>`, '帮助', {
        confirmButtonText: '关闭',
        center: true,
        dangerouslyUseHTMLString: true,
        customClass: 'custom-alert-width'
      })
    },
    // 点击查看前后置代码帮助弹出的浮层窗口
    async openCodeHelp() {
      /* 获取输入参数的帮助内容 */
      let defaultContent = '获取前后置代码的帮助时出错'
      await searchGlobalSettings({ 'searchVal': '', 'region': 'pre_post_code_help' })
        .then(res => {
          defaultContent = res[0]['value']
        })
        .catch(err => {
          console.log('获取前后置代码的帮助时出错：', err)
        })

      /* 给消息框添加样式 */
      const style = document.createElement('style')
      style.textContent = `
        .custom-alert-width {
          width: 1000px !important;
        }`
      document.head.appendChild(style)

      /* 输入参数帮助弹出 */
      this.$alert(`<textarea readonly style="width: 100%; min-height: 280px; border: none; background-color: #f0f0f0; overflow-y: auto;">${defaultContent}</textarea>`, '帮助', {
        confirmButtonText: '关闭',
        center: true,
        dangerouslyUseHTMLString: true,
        customClass: 'custom-alert-width'
      })
    }
  }
}
</script>

<template>
  <div class="app-container">
    <el-row type="flex" align="middle">
      <el-divider><a href="javascript:void(0)" @click="changeShowCode">{{ $t(posDescribe) }}</a></el-divider>
    </el-row>
    <div v-show="showEdit">
      <!-- 代码输入框部分 -->
      <Codemirror v-model="code" />
      <!-- 展示 memoryBus 的按钮 -->
      <!-- 查看 memoryBus 部分 -->
      <el-row type="flex" align="middle" :gutter="6" style="margin-top: 30px">
        <el-col>
          <el-button type="primary" @click="$emit('get_memory_bus')"> {{ $t('checkMemoryBus') }} </el-button>
          <!-- MemoryBus的帮助浮层按钮 -->
          <el-button type="text" class="help-btn" @click="openMemoryBusHelp">帮助[MemoryBus]</el-button> /
          <!-- 前后置代码的帮助浮层按钮 -->
          <el-button type="text" style="margin-left: 0" @click="openCodeHelp">帮助[前后置代码]</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.app-container {
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}
.help-btn {
  margin-left: 10px;
}
</style>
